<template>
    <div>
        <v-dialog v-model="dialog" persistent transition="fab-transition" max-width="800">
            <v-card tile>
                <div class="d-flex justify-space-between mb-5" id="modal-header">
                    <v-card-title class="py-3">举报</v-card-title>

                    <v-btn icon text @click="closeModal">
                        <v-icon>mdi-close</v-icon>
                    </v-btn>
                </div>
                <v-card-text>
                    <v-row>
                        <v-col order="last" order-sm="last" order-md="first" order-lg="first" order-xl="first" cols="12"
                            sm="12" md="8" lg="8" class="pt-0">
                            <h3 class="mb-6 mt-0 pt-0">举报
                            </h3>
                            <ValidationObserver ref="personalInfoForm" v-slot="{ handleSubmit, reset }">
                                <form @submit.prevent="handleSubmit(submit)" @reset.prevent="reset">
                                    <ValidationProvider v-slot="{ errors }" name="举报内容" rules="required|min:3">
                                        <v-text-field v-model="formData.content" :error-messages="errors" label="举报内容"
                                            filled dense></v-text-field>
                                    </ValidationProvider>
                                    <v-btn type="submit" class="primary " depressed>提交</v-btn>
                                </form>
                            </ValidationObserver>
                        </v-col>
                    </v-row>
                </v-card-text>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
//import myUpload from 'vue-image-crop-upload'
import { postReport } from '@/services/ReportRequest';

export default {
    name: 'ReportCard',
    props: ['openDialog','info','type'],
    data: function () {
        return {
            content: '',
            isSuccess: false,
            isError: false,
            value: 0,
            show: false,
            formData: {
                reportedId:null,
                content: '',
                type: this.type
            }
        }
    },
    computed: {
        dialog() {
            return this.openDialog
        }
    },
    methods: {
        async submit() {
            if(this.type==1){
                this.formData.reportedId = this.info.videoId
            }
            if(this.type==2){
                this.formData.reportedId = this.info.commentId
            }
            if(this.type==3){
                this.formData.reportedId = this.info.roomId
            }
            postReport(this.formData)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.openDialog = false
                    }
                }).catch((err) => {
                    console.log(err)
                });
        },
        closeModal() {
            this.$emit('closeDialog')
        },
        toggleShow() {
            this.show = !this.show
        }
    },
}
</script>